/**
 * 描述：音乐播放器样式控制
 * 公司：xxx有限公司
 * 版权：xxx2020
 * 作者：oyjl
 * 时间：2020-04-16 12:24:14
 */
.r-audio {
  width: 400px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 1px 1px 10px 1px #1c6573;
  box-sizing: content-box;
  background: linear-gradient(210deg, #020000, transparent);
  color: #fff;
  text-align: left;
  .theme-panel {
    text-align: right;
    > div {
      width: 16px;
      height: 16px;
      display: inline-block;
      margin: 0px 6px;
    }
    > div:hover {
      border: 1px solid #fff;
      cursor: pointer;
      box-sizing: border-box;
    }
    .blue-theme {
      background: linear-gradient(210deg, #44cef6, transparent);
    }
    .red-theme {
      background: linear-gradient(210deg, #c32136, transparent);
    }
    .green-theme {
      background: linear-gradient(210deg, #21a675, transparent);
    }
    .black-theme {
      background: linear-gradient(210deg, #020000, transparent);
    }
    .yellow-theme {
      background: linear-gradient(210deg, #ff8936, transparent);
    }
  }
  .show-panel {
    width: inherit;
    > div {
      margin: 4px 0;
    }
    > div:nth-child(3) {
      height: 21px;
    }
  }
  .control-panel {
    width: inherit;
    text-align: center;
    > div {
      display: inline-block;
      margin: 0 6px;
      i {
        padding: 2px;
        width: 20px;
        box-shadow: 1px 1px 0px 1px #888;
        cursor: pointer;
      }
      i:active {
        position: relative;
        top: 1px;
        left: 1px;
      }
    }
    > div:nth-child(4) {
      height: 7px;
    }
  }
  .list-panel {
    margin: 16px 0;
    color: #000;
    max-height: 240px;
    overflow-y: auto;
    table {
      width: 100%;
      border-collapse: collapse;
      color: #eee;
      tr {
        th,
        td {
          border: 1px solid #eee;
          height: 28px;
          a {
            color: inherit;
          }
        }
        th {
          font-weight: 700;
        }
        th:nth-child(1) {
          width: 40%;
        }
      }
      tr:nth-child(1):hover {
        background: transparent;
        cursor: auto;
        color: inherit;
      }
      tr:hover {
        background: #82b1cf;
        color: #fff;
        cursor: pointer;
      }
      .active {
        background: #82b1cf;
        color: #fff;
        cursor: pointer;
      }
    }
  }
}
